<template>
  <div>
    <div class="listContent">
      <div class="listborrau">
        <div class="listcont">
          <div class="preadd" v-for="(item,index) in infolist" :key="index">
            <div class="preadd-one dis-ver">
              <span class="num-circle dis-ver">{{item.numm}}</span>
              <router-link
                :to="{path: 'childindex',query: { key: item.infotitle} }"
                class="little-title dis-ver"
              >{{item.infotitle}}</router-link>
            </div>
            <div class="preadd-two dis-ver">
              <ul>
                <li
                  class="items"
                  v-for="(item,index) in filteredItems"
                  :key="index"
                  @click="openpop($event)"
                >
                  <span class="item-span">{{item.num1}}</span>
                  <span class="item-span1">{{item.firstname1}}</span>
                </li>
              </ul>
              <ul
                style="max-width: 4.4rem; overflow-x: auto; height: 0.6rem; white-space: nowrap; border-top: 1px solid #d3dfeb;"
                v-if="filItems!== undefined && filItems!== null && filItems.length>0 ? true: false"
              >
                <li class="items" v-for="(item,index) in filItems" :key="index" @click="openpop($event)">
                  <span class="item-span">{{item.num1}}</span>
                  <span class="item-span1">{{item.firstname1}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <popBox v-show="setflag" @hideTips="hideTips" ref="popref"></popBox>
      <div class="listborrau">
        <div class="listcont">
          <div class="preadd" v-for="(item,index) in infolist" :key="index">
            <div class="preadd-one dis-ver">
              <span class="num-circle dis-ver">{{item.numm}}</span>
              <router-link
                :to="{path: 'childindex',query: { key: item.infotitle} }"
                class="little-title dis-ver"
              >{{item.infotitle}}</router-link>
            </div>
            <div class="preadd-two dis-ver">
              <ul>
                <li
                  class="items"
                  v-for="(item,index) in filteredItems"
                  :key="index"
                  @click="openpop($event)"
                >
                  <span class="item-span">{{item.num1}}</span>
                  <span class="item-span1">{{item.firstname1}}</span>
                </li>
              </ul>
              <ul
                style="max-width: 4.4rem; overflow-x: auto; height: 0.6rem; white-space: nowrap; border-top: 1px solid #d3dfeb;"
                v-if="filItems!== undefined && filItems!== null && filItems.length>0 ? true: false"
              >
                <li class="items" v-for="(item,index) in filItems" :key="index" @click="openpop($event)">
                  <span class="item-span">{{item.num1}}</span>
                  <span class="item-span1">{{item.firstname1}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import popBox from './popBox'
export default {
  data () {
    return {
      setflag: false, // 设置
      infolist: [
        { numm: 5, infotitle: '病重' },
        { numm: 4, infotitle: '病危' },
        { numm: 3, infotitle: '今日住院' },
        { numm: 5, infotitle: '明日出院' },
        { numm: 5, infotitle: '一级护理' }
      ],
      numlist1: [
        { num1: 61, firstname1: '(陈)' },
        { num1: 61, firstname1: '(王)' },
        { num1: 61, firstname1: '(计)' },
        { num1: 61, firstname1: '(王)' },
        { num1: 61, firstname1: '(计)' },
        { num1: 61, firstname1: '(计)' }
      ]
    }
  },
  components: {
    popBox
  },
  methods: {
    openpop: function (en) {
      this.$refs.popref.changePosition(en.clientY, en.clientX)
      this.setflag = true // 鼠标经过显示
    },
    hideTips: function (data) {
      this.setflag = false
    }
  },
  created () {
    console.log(this.filItems.length)
  },
  computed: {
    filteredItems: function () {
      return this.numlist1.slice(0, 5)
    },
    filItems: function () {
      console.log(this.numlist1)
      return this.numlist1.slice(5)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../static/css/comm.css';

.listContent {
  height: 4.6rem;
  display: flex;
  justify-content: space-between;

  .listborrau {
    width: 7.07rem;
    height: 100%;
    background-color: #fff;
    border-radius: 0.15rem;
    box-shadow: 0 0 0.1rem #e9edf2;

    .listcont {
      max-height: 4.6rem;
      overflow-y: auto;

      .preadd {
        padding-left: 0.2rem;
        border-bottom: 1px solid #d3dfeb;

        .preadd-one {
          width: 1.85rem;
        }

        .preadd-two {
          width: 4.94rem;
        }
      }

      .preadd:nth-child(1) .num-circle {
        background: #29b8ff !important;
      }

      .preadd:nth-child(2n) .num-circle {
        background: #29b8ff;
      }

      .preadd:nth-child(2n+1) .num-circle {
        background: #57d9a0;
      }

      .preadd:nth-child(1) .little-title {
        color: #29b8ff !important;
      }

      .preadd:nth-child(2n) .little-title {
        color: #29b8ff;
      }

      .preadd:nth-child(2n+1) .little-title {
        color: #57d9a0;
      }

      .list-ul {
        .list-li {
          height: 0.57rem;
          line-height: 0.57rem;
          border-top: 1px solid #d3dfeb;
          box-sizing: content-box;
          padding-left: 0.2rem;
        }
      }
    }
  }
}

.num-circle {
  width: 0.27rem;
  height: 0.27rem;
  margin-right: 0.15rem;
  text-align: center;
  line-height: 0.27rem;
  font-size: 0.14rem;
  color: #fff;
}

.little-title {
  font-size: 0.24rem;
  width: 1.35rem;
}

.cirbgc {
  background-color: #29b8ff;
}

.cirbgc1 {
  background-color: #57d9a0;
}

.fontcol {
  color: #29b8ff;
}

.fontcol1 {
  color: #57d9a0;
}

.dis-ver {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
}

.items {
  width: 0.75rem;
  margin-right: 0.15rem;
  display: inline-block;
  line-height: 0.57rem;

  .item-span {
    font-size: 0.28rem;
    color: #021233;
  }

  .item-span1 {
    font-size: 0.2rem;
    color: #7c8598;
  }
}
</style>
